<template>
    <el-dialog
        class="dialog"
        width="700px"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-layer-top"
            :model="formData"
            :rules="rules"
        >
            <div class="box-row">
                <div class="box-flex1">
                    <el-form-item label="门禁guid:" prop="door_guid">
                        <el-input
                            type="textarea"
                            placeholder="请输入门禁guid"
                            v-model="formData.door_guid"
                            clearable
                            resize="none"
                            maxlength="20"
                            :autosize="{ minRows: 1, maxRows:1 }"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="描述:" prop="remark">
                        <el-input
                            type="textarea"
                            placeholder="请输入考勤门禁描述"
                            v-model="formData.remark"
                            clearable
                            resize="none"
                            maxlength="20"
                            :autosize="{ minRows: 4, maxRows:4 }"
                        ></el-input>
                    </el-form-item>
                </div>
                <div class="right">
                    <div>考勤员工</div>
                    <uxTree
                        ref="tree"
                        show-checkbox
                        highlight-current
                        node-key="section_sn"
                        :data="menuData"
                        :default-expand-all="true"
                        :indent="0"
                        :props="treeParams"
                        @check="onCheck"
                    />
                </div>
            </div>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmitBefore">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { isEmpty } from "@/utils/index";
import { includes } from "lodash";
import XEUtils from "xe-utils";
import uxTree from "@/components/tree";
@Component({
    name: "kqDoorEdit",
    mixins: [mixinDialogForm],
    components: { uxTree }
})
export default class kqDoorEdit extends Vue {
    @Action("kqDoor/add") itemAdd: any;
    @Action("kqDoor/edit") itemEdit: any;
    @Action("purviewDepartment/staff") getMenu: any;
    @Getter("purviewDepartment/staff") menuData: any;

    mounted() {
        this.getMenu();
    }
    editInit(data: any) {
        const me = this as any;
        data.kq_staffList = data.kq_staff;
        me.formData = Object.assign({}, me.formData, data);
        me.checkedTree();
    }

    checkedTree() {
        const data = this.menuData,
            selectIds = this.formData.kq_staffList;
        if (!isEmpty(data) && !isEmpty(selectIds)) {
            const list: any = [];
            // 获取的选中项不包括父节点id，避免展示错误
            XEUtils.eachTree(data, (item) => {
                if (!item.children) {
                    if (includes(selectIds, item.section_sn)) {
                        list.push(item.section_sn);
                    }
                }
            });
            const menuTree: any = this.$refs.tree;
            // 设置当前选中权限
            menuTree.setCheckedKeys(list);
        }
    }
    // 表单数据
    formData: any = {
        kq_staffList: [],
        kq_staff: [],
        door_guid: "",
        remark: ""
    };
    roledata: any = [];
    // 表单验证
    rules: any = {
        door_guid: [
            {
                required: true,
                message: "请输入考勤门禁guid"
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑考勤门禁" : "新增考勤门禁";
    }
    // 角色选中时
    onCheck(item: any, data: any) {
        const list = data.checkedKeys;
        // 将半选中节点id添加进去
        list.push(...data.halfCheckedKeys);
        this.formData.kq_staffList = list;
    }
    closeBefore() {
        const me = this as any;
        // 清除当前选中权限
        me.$refs.tree.setCheckedKeys([]);
        me.formData.kq_staffList = [];
    }
    // 保存
    onSubmitBefore() {
        const me = this as any;
        if (!me.formData.kq_staffList.length) {
            me.$message({
                message: "请选择考勤员工",
                type: "error",
                customClass: "zZindex"
            });
        } else {
            me.formData.kq_staff = me.formData.kq_staffList.toString();
            me.onSubmit();
        }
    }
    treeParams: any = {
        label: "section_name"
    };
}
</script>
<style lang="scss" scoped>
.right {
    width: 60%;
    padding: 15px 0 10px 20px;
    .el-tree {
        margin-top: 5px;
        padding: 10px;
        height: 40vh;
        overflow: auto;
    }
}
</style>